<template>
	<view class="swipe">
		<wd-swiper :autoplay="false" v-model:current="current" custom-indicator-class="custom-indicator-class"
			custom-image-class="custom-image" custom-next-image-class="custom-image-prev"
			custom-prev-image-class="custom-image-prev" :indicator="{ type: 'none' }" :list="swiperList"
			previousMargin="24px" nextMargin="24px" height="146px" :display-multiple-items="0"></wd-swiper>
	</view>
	<view class="icon-box">
		<view class="card" @click="tonav(1)">
			<image src="/static/img/jsbk2.png" style="width: 92rpx;height: 92rpx;" mode=""></image>
			<text>健身办卡</text>
		</view>
		<view class="card" @click="tonav(2)">
			<image src="/static/img/jsbk.png" style="width: 92rpx;height: 92rpx;" mode=""></image>
			<text>健身课程</text>
		</view>
		<view class="card" @click="tonav(3)">
			<image src="/static/img/jsbk3.png" style="width: 92rpx;height: 92rpx;" mode=""></image>
			<text>运动商城</text>
		</view>
		<view class="card" @click="tonav(4)">
			<image src="/static/img/jsbk4.png" style="width: 92rpx;height: 92rpx;" mode=""></image>
			<text>场地预定</text>
		</view>
	</view>
	<wd-divider color="#EEEEEE"></wd-divider>
	<wd-cell>
		<template #title>
			<view class="cell-icon">
				<view class="color_line"></view>
				<text>推荐课程</text>
			</view>
		</template>
	</wd-cell>
	<view class="s-view">
		<scroll-view scroll-x="true" class="s-view-s">
			<view class="item-s" v-for="(item,index) in courseList" :key="index" @click="toDedetail(item)">
				<image :src="item.cover" style="width: 299rpx;height: 225rpx;" mode=""></image>
				<view class="t1 line1">{{item.title || ''}}</view>
				<view class="t2">¥{{item.price || ''}}</view>
			</view>
		</scroll-view>
		<wd-status-tip v-if="courseList.length == 0" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无课程" />
	</view>
	<wd-divider color="#EEEEEE"></wd-divider>
	<wd-cell  >
		<template #title>
			<view class="cell-icon">
				<view class="color_line"></view>
				<text>附近门店</text>
			</view>
		</template>
	<!-- 	<template #default>
			<text class="cell-rank">全部门店</text>
		</template> -->
	</wd-cell>
	<view class="item-b" v-for="(item,index) in enterpriseList" :key="index" @click="selectCourse(item)">
		<image :src="item.imgUrl" style="width: 112rpx;height: 112rpx;border-radius: 12rpx;" mode=""></image>
		<view class="item-b_c">
			<view class="t1 line1">{{item.name || ''}}</view>
			<view class="t2 line1">{{item.detail || ''}}</view>
			<view class="t2 line1">
				<text>{{item.address || ''}}</text>
				<text>{{item.distance || ''}}</text>
			</view>
		</view>
	</view>
	<wd-status-tip v-if="enterpriseList.length == 0" image="/static/viewNull.png"  :image-size="{ height: 50,  width: 50}" tip="暂无门店" />
	<fui-loading type="col" v-if="loadActive" :isFixed="true" :isMask="true"></fui-loading>
</template>

<script setup>
	import { login } from '../../apis';
    import {useUserStore } from '@/store/user';
	import { onPullDownRefresh } from '@dcloudio/uni-app'
	import { storeToRefs } from 'pinia'
	const userStore = useUserStore();
	const { userInfo,isLogin } = storeToRefs(userStore);
	
	const current = ref(0);
	const loadActive = ref(false);
	const swiperList = ref([]);
	const courseList = ref([]);
	const latitude = ref(null);
	const longitude = ref(null);
	const enterpriseList = ref([]);


	
	// 跳转详情
	const toDedetail = (item) => {
		uni.navigateTo({
			url: '/pagesA/view/course/courseDetails?businessId=' + item.id
		});
	}

	// nav跳转
	const tonav = (index) => {
		if (!isLogin.value) {
			uni.reLaunch({
				url:'/pagesA/view/login/index'
			})
			return;
		}
		switch (index) {
			case 1:
				uni.switchTab({
					url: '/pages/vip/index'
				});
				break;
			case 2:
				uni.navigateTo({
					url: '/pagesA/view/course/index'
				});
				break;			
			default:
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				break;
		}
	}			
			
	// 门店列表
	const toShop = () => {
		if (!isLogin.value) {
			uni.reLaunch({
				url:'/pagesA/view/login/index'
			})
			return;
		}
		uni.navigateTo({
			url: '/pagesA/view/shopList/index'
		});
	};
	
	// 获取轮播图
	const getBannerList =  () => {
		uni.api.getBannerList().then(res => {
			if(res.code==0){
				const data = res.data;
				swiperList.value = data.map(item => item.imgUrl);
			}
		})
	};
	// 推荐课程
	const getEnterprise =  () => {
		uni.api.getMiniHomeClassData().then(res => {
			if(res.code==0){
				courseList.value = res.data || []; 
			}
		});
	};
	
	// 选择课程
	const selectCourse = (gym) => {
		if (!isLogin.value) {
			uni.reLaunch({
				url:'/pagesA/view/login/index'
			})
			return;
		}
		uni.navigateTo({
			url: `/pagesA/view/course/selCourse?id=${gym.id}&name=${gym.name}`
		});
	}
	// 附近门店
	const getHomeVenue =  () => {
		// #ifdef  WEB
			latitude.value = 31.85757;
			longitude.value = 117.26701;
			uni.api.getMiniHomeVenue({
			  lat: latitude.value, // 纬度
			  lng: longitude.value, // 经度
			}).then(res2 => {
			  if (res2.code == 0) {
			    enterpriseList.value = res2.data || [];
			  }
			});
			// #endif
		// #ifdef  MP-WEIXIN
		// 获取模糊地理位置
		uni.getFuzzyLocation({
		 type: 'wgs84',
		 success (res) {
		   latitude.value = res.latitude;
		   longitude.value = res.longitude;
		   // 成功拿到经纬度，携带坐标查询
		   uni.api.getMiniHomeVenue({
		     lat: latitude.value, // 纬度
		     lng: longitude.value, // 经度
		   }).then(res2 => {
		     if (res2.code == 0) {
		       enterpriseList.value = res2.data || [];
		     }
		   });
		 },
		 fail (err) {
		   // 用户拒绝或获取失败，传 null 查询
		   uni.api.getMiniHomeVenue({
		     lat: null,
		     lng: null,
		   }).then(res2 => {
		     if (res2.code == 0) {
		       enterpriseList.value = res2.data || [];
		     }
		   });
		 }
		})
		// #endif
		
	};
	
	// 下拉刷新
	onPullDownRefresh(()=>{
		loadActive.value = true;
		getBannerList();
		getEnterprise();
		getHomeVenue();
		setTimeout(() => {
			uni.stopPullDownRefresh();
			loadActive.value = false;
		}, 300);
	}) 
		
	onLoad(async () => {
		getBannerList();
		getEnterprise();
		getHomeVenue();
	});
	// 发送给朋友
	onShareAppMessage(()=>{
		return {
			title: "ChangePro",
			path: '/pages/index/index',
			desc: 'Change Pro-健身健美文化社区',
		}
	})
		
	//分享到朋友圈
	onShareTimeline(()=>{
		return {
			title: "ChangePro",
			path: '/pages/index/index',
			desc: 'Change Pro-健身健美文化社区',
		}
	})
</script>
<style lang="scss">
	.swipe {
		--wot-swiper-radius: 0;
		--wot-swiper-item-padding: 0 12rpx;
		--wot-swiper-nav-dot-color: #e7e7e7;
		--wot-swiper-nav-dot-active-color: #4d80f0;
		padding-bottom: 24rpx;
		padding-top: 10rpx;
		:deep(.custom-indicator-class) {
			bottom: -16px;
		}

		:deep(.custom-image) {
			border-radius: 12rpx;
		}

		:deep(.custom-image-prev) {
			// height: 168px !important;
		}
	}
	:deep(.wd-divider){
		margin: 10rpx 0 !important;
	}
	.icon-box {
		width: 710rpx;
		margin-left: 20rpx;
		padding: 12rpx 0 12rpx 0;
		display: flex;
		.card {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;

			text {
				font-weight: 400;
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #363635;
			}
		}
	}

	.cell-icon {
		font-size: 36rpx;
		color: #363635;
		font-weight: bold;
		display: flex;
		align-items: center;

		.color_line {
			background: #F7C80C;
			width: 5px;
			height: 19px;
			border-radius: 2px 2px 2px 2px;
			margin-right: 10rpx;
		}
	}

	.cell-rank {
		color: #666563;
	}

	.s-view {
		padding-left: 30rpx;
		padding-bottom: 20rpx;
		.s-view-s {
			white-space: nowrap;
		}
		.item-s {
			display: inline-block;
			width: 40%;
			margin-top: 20rpx;
			text-align: center;
			padding-right: 30rpx;
			.t1 {
				font-size: 28rpx;
				color: #363635;
				font-weight: bold;
				margin-left: 20rpx;
			}

			.t2 {
				font-size: 24rpx;
				color: #F44B4B;
				font-weight: bold;
				margin-left: 20rpx;
			}
		}
	}
	.item-b{
		display: flex;
		align-items: center;
		padding: 10rpx 40rpx;
		.item-b_c{
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-left: 20rpx;
			.t1 {
				font-weight: 400;
				font-size: 32rpx;
				color: #1B1B1A;
				font-weight: 600;
			}
			.t2{
				font-size: 26rpx;
				color: #71706D;
				margin-top: 6rpx;
				width: 550rpx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>